<template>
    <div class="booklist">
        <el-form :inline="true" :model="book" class="demo-form-inline">
          <el-form-item label="书名">
            <el-input v-model="book.name" placeholder="书名" size="small"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="book.author" placeholder="作者" size="small"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
            :data="booklist"
            border>
            <el-table-column
              prop="id"
              label="编号">
            </el-table-column>
            <el-table-column
              prop="name"
              label="书名">
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格">
            </el-table-column>
            <el-table-column
              prop="author"
              label="作者">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="check(scope.row)" size="mini">查看</el-button>
                <el-button @click="edit(scope.row)" type="primary" size="mini">编辑</el-button>
              </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { mapState, mapGetters,mapMutations,mapActions } from 'vuex'
export default {
    data(){
        return{
            book:{
                name:'',
                author:''
            }
        }
    },
    mounted(){
        this.search();
    },
    methods:{
      ...mapActions('book', ['get_booklist']),
      logout(){},
      check(item){
        this.$router.push({path:'/context/book/bookdetail',query:{id:item.id}});
      },
      edit(item){
        this.$router.push({path:'/context/book/bookEdit',query:{id:item.id}});
      },
      search(){
        this.get_booklist(this.book);
      }
    },
    computed:{
      ...mapGetters('book', ['booklist'])
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.booklist
{
}
</style>
